<template>

  <div class="mainPad">
    <ul class="address">
      <li v-for="item in list" :key='item'>
        <div class="splist">
          <div class="businessCard">
            <div class="list3">
              <div class="flex list3name">
                {{item.contactName}}
                <div v-if="item.contactSex===1">先生</div>
                <div v-if="item.contactSex===0">女士</div>
                &nbsp;&nbsp;
                {{item.contactTel}}
              </div>
              <div class="my-1.5">{{item.address}}</div>

            </div>

            <div class="list4">
              <div class="flex justify-end">
                <img class="list4img" src="../assets/xiugai.png" @click="toModify(item.adId)">&nbsp;&nbsp;
                <img class="list4img" src="../assets/delete.png" @click ="deleteAdd(item.adId)">
              </div>

            </div>

          </div>

        </div>
      </li>
    </ul>

    <div class="add">
      <div class="flex my-4 mx-28" @click="toaddAddress">
        <img class="list4img" src="../assets/addnew.png">&nbsp;&nbsp;
        新增送货地址
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import store, {userStore, addressStore} from "../store";
import {onActivated, onBeforeMount, onMounted, onUpdated, ref} from "vue";
import axios from "axios";
import router from "../router";

function setTitle(){
  store.state.tit="地址管理"
}

onBeforeMount(()=>{
  setTitle()
})
onMounted(()=>{
  getList()

})

const userstore = userStore()
const addstore = addressStore()
const list = ref([])

const getList = () =>{
  axios.get('/path/address/query?userId='+userstore.userId,{
  })
      .then(function (res){
        list.value = res.data;
        console.log(res.data)
      })
}
const deleteAdd = (adId: any) =>{
  axios.delete('/path/address/'+adId,{
  })
      .then(res=>{
        list.value = res.data;
        console.log(res.data)
      })

  router.push('/addressList')
}

const toaddAddress=()=>{
  router.push('/addAddress')
}

const toModify=(adId: any)=>{
  addstore.addressId = adId
  router.push('/modifyAddress')
}

</script>

<style scoped>

.mainPad {
  height: 86vh;
  overflow: scroll;
  @apply relative bg-gray-100;
}

.splist{
  @apply bg-white border-2;
}

.businessCard{
  @apply m-1 flex flex-row justify-center content-center items-center;
}
.list3{
  width: 70%;
  @apply flex flex-col m-1;
}

.list3name{
  @apply my-1.5 text-xl;
}

.list4{
  width: 23%;
  @apply flex flex-col text-right text-sm;
}
.list4img{
  @apply w-7 h-7;
}

.add{
  @apply flex border-2 my-8 bg-white text-blue-500 font-semibold text-center h-14;
}

</style>